import * as PIXI from 'pixi.js'
import param from '../param'
import type from './type'
import category from './category'
import series from './series'
import element from './element'
import input from './input'
import picture from './picture'
import { wheelDiyPicture, mousedownDiyPciture } from '@/utils/events/indiv'
import { setPixi } from '@/store/modules/usePixiStore'

export default async () => {
  const container = new PIXI.Container()
  const pictureContainer = await picture() // 图片
  const elementContainer = await element() // 五行
  const typeContainer = await type() // 类型
  const categoryContainer = await category() // 类别
  const seriesContainer = await series() // 系列
  const inputContainer = await input() // 输入框
  // 蒙版
  const mask = new PIXI.Graphics()
  mask.rect(-typeContainer.width / 2, -typeContainer.height / 2, typeContainer.width, typeContainer.height).fill({
    color: 0x000000,
  })
  mask.scale.set(0.82, 0.92)
  pictureContainer.mask = mask
  container.addChild(pictureContainer)
  container.addChild(elementContainer)
  container.addChild(seriesContainer)
  container.addChild(typeContainer)
  container.addChild(categoryContainer)
  container.addChild(inputContainer)
  container.addChild(mask)
  container.position.set(param.value.previewWidth, param.value.previewHeight)
  container.scale.set(param.value.bgScale.x)
  wheelDiyPicture.whiteAdd(container)
  mousedownDiyPciture.whiteAdd(container)
  setPixi('diy-container', container)
  return container
}
